<template>
  <up-popup :show="show" @close="hidePopup">
    <view class="header">添加订单</view>
    <scroll-view class="content">
      <up-form class="p-[30rpx]" ref="formRef" labelWidth="150rpx">
        <up-form-item label="用户ID">
          <up-input v-model="formData.nickname" placeholder="请输入用户ID" />
        </up-form-item>
        <up-form-item label="下单时间">
          <view class="input" @click="showDatePicker=true">
            <up-input v-model="formData.birthday" placeholder="请选择下单时间" disabled disabledColor="#fff" />
            <up-datetime-picker v-model="formData.birthday" :show="showDatePicker" @cancel="showDatePicker = false" @confirm="handleDatePickerConfirm"></up-datetime-picker>
          </view>
        </up-form-item>
        <up-form-item label="商品">
          <up-input v-model="formData.beizhu" placeholder="请选择商品" />
        </up-form-item>
        <up-form-item label="数量">
          <up-input v-model="formData.mobile" placeholder="请输入数量" />
        </up-form-item>
        <up-form-item label="商品原价">
          <up-input v-model="formData.mobile" placeholder="请输入商品原价" />
        </up-form-item>
        <up-form-item label="订单总价">
          <up-input v-model="formData.mobile" placeholder="请输入订单总价" />
        </up-form-item>
      </up-form>
      
    </scroll-view>
    <view class="footer">
      <up-button type="primary" shape="circle" @click="handleSubmit">确认提交</up-button>
    </view>
  </up-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emit = defineEmits(['close'])

const show = ref(false);
const formData = ref({
  uid: '',
  nickname: '',
  level: '',
  jieduan: '',
  beizhu: '',
  mobile: '',
  sex: '',
  status: '',
  birthday: '',
  captcha: '',
  guanlian_ok: '',
  fufei: '',
});


const showDatePicker = ref(false);

function handleDatePickerConfirm() {

  showDatePicker.value = false
}

async function handleSubmit() {}

function showPopup(value:any = {}) {
  formData.value = Object.assign(formData.value, value)
  show.value = true;
}
function hidePopup() {
  show.value = false;
  emit('close');
}

defineExpose({ showPopup, hidePopup })

</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  .text {
    margin-left: 5rpx;
  }
}
.header {
  padding: 30rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
}
.content {
  // padding: 0 30rpx;
  box-sizing: border-box;

  .input {
    width: 100%;
    position: relative;
    .input-icon {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .radio {
    margin-right: 15rpx;
  }
}
.footer {
  padding: 30rpx;
}
</style>
